import React, { Component } from 'react'
import { getLocalCity } from '../../utils/localCity'
import HomeHeader from '../../components/homeHeader'
import Filter from './components/Filter'
import './index.scss'

export default class HouseList extends Component {
  state = {
    localCity: ''
  }

  async componentDidMount() {
    const { label: localCity } = await getLocalCity()

    this.setState({
      localCity
    })
  }

  renderHeader = (localCity) => {
    return (
      <div className="houselist-header">
        <i className="iconfont icon-back houselist-header-back"></i>
        <HomeHeader localCity={localCity} className="houselist-position" />
      </div>
    )
  }

  render() {
    const { localCity } = this.state
    return (
      <div className="houselist-box">
        {this.renderHeader(localCity)}

        <Filter />
      </div>
    )
  }
}
